		// 轮播图1
		$(function() {
			class Swiper {
				constructor() {
					this.w = $('.swiper-item').width();
					this.num = 0;
					this.len = $('.swiper .swiper-item').length - 1;
					this.timer = null;
				}
				init() {
					//设置定时器
					this.setTime();
					//滑上停止定时器
					this.hover();
					//点击指示
					this.pointClick();
					// //点击左右箭头
					// this.lrClick();
				}
				setTime() {
					this.timer = setInterval(() => {
						this.num++;
						if (this.num > this.len) {
							this.num = 0;
						}
						let cssTrx = -this.num * this.w;
						$('.swiper-point-item .point').eq(this.num).addClass('active').siblings()
							.removeClass('active');
						$('.swiper').css({
							transform: `translateX(${cssTrx}px)`
						})
					}, 3000)
				}
				hover() {
					$('.swiper-contione').hover(() => {
						clearInterval(this.timer)
					}, () => {
						this.setTime();
					});
				}
				pointClick() {
					let that = this;
					$('.swiper-point-item .point').mousemove(function() {
						that.num = $(this).index();
						let cssTrx = -that.num * that.w;
						$(this).addClass('active').siblings().removeClass('active');
						$('.swiper').css({
							transform: `translateX(${cssTrx}px)`
						})
					})
				}
			}
			let sw = new Swiper();
			sw.init();
		})
		// 轮播图1
		// 精灵图
		var menu = document.querySelectorAll('.menu-li-i');
		for (var i = 0; i < menu.length; i++) {
			var index = i * 55;
			menu[i].style.backgroundPosition = '0 -' + index + 'px'
		}
		// 精灵图
		// <!-- 轮播图2 -->
		var viewpage = document.getElementsByClassName('viewpage')[0];
		var item = document.getElementsByClassName('item');
		var calList = document.getElementsByClassName('cal-list')[0];
		var prev = document.getElementsByClassName('prev')[0];
		var next = document.getElementsByClassName('next')[0];
		var circleList = document.getElementsByClassName('circle-list')[0];
		var circle = document.getElementsByClassName('circle');

		var index = 0; //图片索引
		var circleIndex = 0; //焦点索引
		var interId2;
		//1 自动轮播
		function autoplay() {
			interId2 = setInterval(function() {
				index++;
				circleIndex++;
				if (index >= item.length) {
					index = 1;
					viewpage.style.left = '0px';
				}
				if (circleIndex == circle.length) {
					circleIndex = 0;
				}
				initColor(circle); //初始化颜色
				circle[circleIndex].className = 'circle active'; //设置当前焦点颜色
				var target = -600 * index;
				slowMoveAnima(viewpage, target)
			}, 4000);
		}
		autoplay();

		//2 鼠标悬停动画暂停, 鼠标离开动画继续
		calList.onmouseover = circleList.onmouseover = function(e) {
			prev.style.display = 'block';
			next.style.display = 'block';
			clearInterval(interId2);
		}
		calList.onmouseout = circleList.onmouseout = function(e) {
			prev.style.display = 'none';
			next.style.display = 'none';
			autoplay();
		}
		// 3 点击左右按钮进行移动
		next.onclick = function(e) {
			index++;
			circleIndex++;
			if (index == item.length) { // 如果当前图片索引为最后一张图片, 瞬间移动到第1张图片, 索引设置1
				index = 1;
				viewpage.style.left = '0px';
			}
			if (circleIndex == circle.length) {
				circleIndex = 0;
			}
			initColor(circle); //初始化颜色
			circle[circleIndex].className = 'circle active'; //设置当前焦点颜色
			var target = -600 * index;

			slowMoveAnima(viewpage, target)
		}
		prev.onclick = function(e) {
			if (index == 0) { // 判断为第一张图片, 瞬间移动最后一张图片, 设置索引为图片个数长度-1
				index = item.length - 1;
				viewpage.style.left = -600 * index + 'px';
			}
			index--;
			circleIndex--;
			if (circleIndex < 0) {
				circleIndex = circle.length - 1;
			}
			initColor(circle); //初始化颜色
			circle[circleIndex].className = 'circle active'; //设置当前焦点颜色
			var target = -600 * index;
			slowMoveAnima(viewpage, target)
		}

		function initColor(arr) { // 排他思想
			for (var i = 0; i < arr.length; i++) {
				arr[i].className = 'circle';
			}
		}

		//循环焦点添加点击事件
		for (var i = 0; i < circle.length; i++) {
			circle[i].ind = i;
			circle[i].onclick = function(e) {
				index = this.ind;
				circleIndex = this.ind;
				initColor(circle); //初始化颜色
				circle[circleIndex].className = 'circle active'; //设置当前焦点颜色
				var target = -600 * index;
				slowMoveAnima(viewpage, target)
			}
		}
		/**
		 * 匀速运动
		 * @param {*} ele 
		 * @param {*} target 
		 */
		function moveAnimation(ele, target) {
			clearInterval(interId);
			interId = setInterval(function() {
				// x:小盒距离 大盒子的距离 和 target目标距离
				// x800|0 == target800|0 ,,清空定时器
				// x0-799 > target 0, 向左  点击向左 moveAnimation(small,0)
				// x0-799 <target 800 向右  点击向右 moveAnimation(small,800)
				var x = ele.offsetLeft; //400,800 0-500
				if (x == target) {
					clearInterval(interId);
				} else if (x > target) {
					x -= 30;
					x = x < target ? target : x;
					ele.style.left = x + 'px';
				} else if (x < target) {
					x += 30;
					x = x > target ? target : x;
					ele.style.left = x + 'px';
				}
			}, 10)
		}
		var interId;
		/**
		 * 缓速动画
		 * @param {*} ele 
		 * @param {*} target 
		 */
		function slowMoveAnima(ele, target) {
			clearInterval(interId)
			interId = setInterval(function() {
				if (ele.offsetLeft == target) {
					clearInterval(interId);
				} else {
					var x = (target - ele.offsetLeft) / 10; // (700,0)(200,800)
					x = x > 0 ? Math.ceil(x) : Math.floor(x);
					ele.style.left = ele.offsetLeft + x + 'px';
				}
			}, 10);
		}
		// <!-- 轮播图2 -->